import { useLayoutEffect, useRef } from "react";
import { apps } from "../../defines/allapps";
export default function TriangleSample() {
  const currentApp = apps.find((a) => a.name === "TriangleMSAA");
  const hasRuned = useRef(false);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  useLayoutEffect(() => {
    if(hasRuned.current) {
        return;
    }
    hasRuned.current = true;

    if (!canvasRef.current) return;
    const canvas = canvasRef.current;
    currentApp?.instance.run(canvas);
  }, [currentApp]);
  return (
    <canvas ref={canvasRef} style={{ width: "100%", height: "100%" }}></canvas>
  );
}
